import React, { useCallback, useEffect, useState } from 'react'
import { useNavigate } from 'react-router-dom'
import { Swiper, Grid, Image, Ellipsis, SearchBar } from 'antd-mobile'

import axios from 'axios'
import { baseUrl } from '../utils/request'

function Home() {
    // 发起ajax请求，获取热门商品数据
    const [hotlist, setHotlist] = useState([])
    const [newlist, setNewlist] = useState([])
    useEffect(() => {
        // axios({
        //     url:'',
        //     method:'get'
        // })
        axios.get('http://120.76.247.5:2003/api/goods', {
            params: {
                sort: 'views',
                size: 5,
            }
        }).then(({ data }) => {
            console.log('data', data)
            setHotlist(data.data.result)
        })

        axios.get('http://120.76.247.5:2003/api/goods').then(({ data }) => {
            setNewlist(data.data.result)
        })
    }, [])

    const [keyword, setKeyword] = useState('情侣表')
    const navigate = useNavigate();
    const gotoDetail = useCallback((id)=>{
        navigate('/goods?id='+id)
    },[])
    return <div>
        <SearchBar disabled placeholder={keyword} onFocus={() => {
            navigate('/search?keyword=' + keyword)
        }} />
        <Swiper className='lbt'>
            {
                hotlist.map(item => (
                    <Swiper.Item key={item._id} onClick={gotoDetail.bind(null,item._id)}>
                        <Image src={baseUrl + item.img_url} />
                    </Swiper.Item>
                ))
            }
        </Swiper>
        <h4>最新商品</h4>
        <Grid columns={2} gap={18}>
            {
                newlist.map(item => (
                    <Grid.Item key={item._id} onClick={gotoDetail.bind(null,item._id)}>
                        <Image src={baseUrl + item.img_url} width="100%" />
                        <Ellipsis content={item.goods_name} rows={3} expandText="展开" collapseText="收起">

                        </Ellipsis>

                        <p className='price'><del>{item.price}</del><span>{item.sales_price}</span></p>
                    </Grid.Item>

                ))
            }
        </Grid>
    </div>
}

export default Home;